<template>
  <div>
    <el-row>
      <el-col :span="24" id="VenueManagement1">
        <div style="text-align: left;">场馆名：<el-input @change="loadAllVenue()" v-model="venueNameChos"
            style="width: 30%;" placeholder="请输入场馆名称"></el-input>
        </div>
        <el-select v-model="venueStateChos" placeholder="请选择" @change="loadAllVenue()">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-table :data="page.records" border>

          <el-table-column prop="venueId" label="场馆ID" width="65">
          </el-table-column>

          <el-table-column prop="venueName" label="场馆名" width="110">
          </el-table-column>
          <el-table-column prop="venueImage" label="场馆图片" width="130">
            <template #default="scope">
              <img :src="scope.row.venueImage" alt="场馆图片" style="max-width: 110px; max-height: 110px">
            </template>
          </el-table-column>
          <el-table-column prop="venueLicense" label="场馆许可证" width="130">
            <template #default="scope">
              <img :src="scope.row.venueLicense" alt="场馆许可证" style="max-width: 110px; max-height: 110px">
            </template>
          </el-table-column>

          <el-table-column prop="businessState" label="经营状态" width="70">
            <template slot-scope="scope">
              <template v-if="scope.row.businessState == 0">
                歇业
              </template>
              <template v-else-if="scope.row.businessState == 1">
                营业
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="venueState" label="场馆状态" width="70">
            <template slot-scope="scope">
              <template v-if="scope.row.venueState == 0">
                冻结
              </template>
              <template v-else-if="scope.row.venueState == 1">
                正常
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="businessStartTime" label="营业开始时间" width="100">
          </el-table-column>
          <el-table-column prop="businessEndTime" label="营业结束时间" width="100">
          </el-table-column>

          <el-table-column prop="venueAddress" label="地址" width="150">
          </el-table-column>

          <el-table-column prop="longitude" label="经度" width="100">
          </el-table-column>
          <el-table-column prop="latitude" label="纬度" width="100">
          </el-table-column>

          <el-table-column prop="area" label="面积" width="50">
          </el-table-column>

          <el-table-column prop="classroomNum" label="教室数量" width="50">
          </el-table-column>

          <el-table-column prop="score" label="评分" width="50">
          </el-table-column>

        <el-table-column label="操作" width="140">
          <template #default="scope">

            <el-button @click="normal(scope.row.venueId)" v-if="scope.row.venueState == '0'" type="text"
              size="small">正常</el-button>
            <el-button @click="frooze(scope.row.venueId)" v-if="scope.row.venueState == '1'" type="text"
              size="small">冻结</el-button>


          </template>
        </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "VenueManagementBase",
    data() {
      return {
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
        venueNameChos: "",
        venueStateChos: "",
        options: [{
          value: '0',
          label: '冻结'
        }, {
          value: '1',
          label: '正常'
        }, {
          value: '',
          label: '全部'
        }],

      }
    },
    methods: {
      normal(id){
        this.$http.post("/venue/yVenueBase/updateVenueBaseById", {
            venueId:id,
            venueState:1
        }).then(resp => {
          this.loadAllVenue();
        })
      },
      frooze(id){
        this.$http.post("/venue/yVenueBase/updateVenueBaseById", {
            venueId:id,
            venueState:0
        }).then(resp => {
          this.loadAllVenue();
        })
      },
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllVenue();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllVenue();
      },
      loadAllVenue() {
        this.$http.post("/venue/yVenueBase/pageVenueBase", {
            venueState:this.venueStateChos,
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize,
            venueName: this.venueNameChos
        }).then(resp => {
          this.page = resp.data.data;
        })
      }
    },
    created() {
      this.loadAllVenue();
    }
  }
</script>

<style>
  #VenueManagement2 {
    margin-left: -520px;
    line-height: 100%;
    width: 100%
  }

  #VenueManagement1 {
    line-height: 100%;
    width: 100%
  }
</style>
